<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>《流浪日记》DDM风格游戏系统设计</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 统一的 Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#8B5CF6',
            dark: '#1E293B',
            light: '#F8FAFC',
            accent: '#EC4899',
            success: '#10B981',
            warning: '#F59E0B',
            danger: '#EF4444',
            info: '#06B6D4',
            'primary-dark': '#1E40AF',
            'secondary-dark': '#5B21B6',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Merriweather', 'Georgia', 'serif'],
            mono: ['Fira Code', 'monospace'],
          },
          animation: {
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'float': 'float 3s ease-in-out infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            },
            glow: {
              '0%': { boxShadow: '0 0 5px rgba(59, 130, 246, 0.5)' },
              '100%': { boxShadow: '0 0 20px rgba(59, 130, 246, 0.8)' },
            }
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .text-shadow-lg {
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
      }
      .bg-gradient-magic {
        background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
      }
      .bg-gradient-dark {
        background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
      }
      .bg-gradient-light {
        background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
      }
      .border-glow {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
      }
      .border-glow-lg {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="bg-gradient-dark text-light min-h-screen">
  <!-- 顶部导航栏 -->
  <nav class="bg-dark/80 backdrop-blur-md sticky top-0 z-50 border-b border-primary/30">
    <div class="container mx-auto px-4 py-3">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-full bg-gradient-magic flex items-center justify-center">
            <i class="fa fa-book text-white text-xl"></i>
          </div>
          <h1 class="text-xl font-bold text-white">《流浪日记》DDM风格游戏系统</h1>
        </div>
        <div class="hidden md:flex space-x-6">
          <a href="#core-setting" class="text-gray-300 hover:text-white transition-colors">核心设定</a>
          <a href="#magic-system" class="text-gray-300 hover:text-white transition-colors">魔法属性系统</a>
          <a href="#skill-system" class="text-gray-300 hover:text-white transition-colors">技能系统</a>
          <a href="#dungeon-system" class="text-gray-300 hover:text-white transition-colors">地下迷宫系统</a>
          <a href="#equipment-system" class="text-gray-300 hover:text-white transition-colors">装备经济系统</a>
          <a href="#ddm-simulator" class="text-gray-300 hover:text-white transition-colors">DDM检定模拟器</a>
        </div>
        <div class="md:hidden">
          <button id="mobile-menu-button" class="text-gray-300 hover:text-white">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="md:hidden hidden mt-4 pb-2">
        <a href="#core-setting" class="block py-2 text-gray-300 hover:text-white">核心设定</a>
        <a href="#magic-system" class="block py-2 text-gray-300 hover:text-white">魔法属性系统</a>
        <a href="#skill-system" class="block py-2 text-gray-300 hover:text-white">技能系统</a>
        <a href="#dungeon-system" class="block py-2 text-gray-300 hover:text-white">地下迷宫系统</a>
        <a href="#equipment-system" class="block py-2 text-gray-300 hover:text-white">装备经济系统</a>
        <a href="#ddm-simulator" class="block py-2 text-gray-300 hover:text-white">DDM检定模拟器</a>
      </div>
    </div>
  </nav>

  <!-- 英雄信息面板 -->
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 z-0">
      <div class="absolute inset-0 bg-gradient-to-b from-dark/70 to-dark"></div>
      <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/3dcb4c8a3229409e8ad27ee430aedbc8~tplv-a9rns2rl98-image.image?rcl=202510241031047E793B1989F0A3AAB178&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1763865130&x-signature=R9hWBjYkZCFDPG8s5Ql5lu8Xm9Y%3D" 
           alt="流浪日记主角" 
           class="w-full h-full object-cover object-center">
    </div>
    <div class="container mx-auto px-4 py-16 relative z-10">
      <div class="max-w-4xl mx-auto">
        <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
          <div class="w-48 h-48 md:w-64 md:h-64 rounded-full overflow-hidden border-4 border-primary/50 border-glow-lg">
            <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/3dcb4c8a3229409e8ad27ee430aedbc8~tplv-a9rns2rl98-image.image?rcl=202510241031047E793B1989F0A3AAB178&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1763865130&x-signature=R9hWBjYkZCFDPG8s5Ql5lu8Xm9Y%3D" 
                 alt="流浪日记主角" 
                 class="w-full h-full object-cover">
          </div>
          <div class="flex-1">
            <h2 class="text-3xl md:text-4xl font-bold text-white text-shadow-lg mb-4">流浪者</h2>
            <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-primary/30 border-glow">
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="text-center">
                  <p class="text-sm text-gray-400">等级</p>
                  <p class="text-xl font-bold text-white">16</p>
                </div>
                <div class="text-center">
                  <p class="text-sm text-gray-400">生命值</p>
                  <p class="text-xl font-bold text-danger">200/200</p>
                </div>
                <div class="text-center">
                  <p class="text-sm text-gray-400">魔法值</p>
                  <p class="text-xl font-bold text-primary">120/120</p>
                </div>
                <div class="text-center">
                  <p class="text-sm text-gray-400">经验值</p>
                  <p class="text-xl font-bold text-success">4500/6000</p>
                </div>
              </div>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center">
                  <p class="text-sm text-gray-400">攻击力</p>
                  <p class="text-lg font-semibold text-white">35</p>
                </div>
                <div class="text-center">
                  <p class="text-sm text-gray-400">防御力</p>
                  <p class="text-lg font-semibold text-white">20</p>
                </div>
                <div class="text-center">
                  <p class="text-sm text-gray-400">暴击率</p>
                  <p class="text-lg font-semibold text-white">12%</p>
                </div>
                <div class="text-center">
                  <p class="text-sm text-gray-400">魔法抗性</p>
                  <p class="text-lg font-semibold text-white">15%</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 核心设定 -->
  <section id="core-setting" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-white mb-12">游戏核心设定与世界观</h2>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
        <!-- 基础世界观 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-primary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-magic flex items-center justify-center mr-3">
              <i class="fa fa-globe text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">基础世界观</h3>
          </div>
          <p class="text-gray-300 mb-4">
            主角为16岁因家庭变故离家的流浪者，在现代都市边缘探索废弃区域、地下迷宫等场景，通过生存、战斗、社交逐步揭开城市隐藏的"魔法残留"秘密。
          </p>
          <p class="text-gray-300">
            地下迷宫中残留的古代魔法能量，既是怪物变异的根源，也是主角魔法属性觉醒的契机。游戏核心循环为"探索获取资源→装备/技能成长→挑战更高难度迷宫→解锁剧情碎片"，全程以文字叙事+DDM骰子检定驱动。
          </p>
        </div>
        
        <!-- 核心玩法定位 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-secondary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-secondary to-accent flex items-center justify-center mr-3">
              <i class="fa fa-gamepad text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">核心玩法定位</h3>
          </div>
          <p class="text-gray-300 mb-4">
            融合"文字冒险沉浸感+DDM策略检定+全自动挂机收益+装备技能养成"，目标受众覆盖文字游戏爱好者、策略型玩家、轻度挂机用户。
          </p>
          <p class="text-gray-300">
            核心体验为"低操作门槛+高策略深度"，通过魔法属性与技能系统提升后期养成维度。每个场景中有地下迷宫，适用于玩家自动挂机打怪的场景，地下迷宫通关条件（手动点击挑战精英或者挑战boss）后通关，或者直接逃跑。
          </p>
        </div>
      </div>
      
      <!-- 故事线概览 -->
      <div class="mt-12 max-w-6xl mx-auto">
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-info/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-info to-primary flex items-center justify-center mr-3">
              <i class="fa fa-book text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">故事线概览</h3>
          </div>
          
          <div class="relative">
            <!-- 时间线 -->
            <div class="absolute left-0 md:left-1/2 transform md:-translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary"></div>
            
            <!-- 东方大陆故事线 -->
            <div class="relative z-10 mb-8">
              <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
                  <h4 class="text-lg font-semibold text-primary mb-2">东方大陆故事线：剑与术法的源流（1-3级）</h4>
                  <p class="text-gray-300">主角因家庭变故离家，在破庙觉醒魔法能力，开始探索玄铁门的秘密，对抗影刃会的追杀。</p>
                </div>
                <div class="w-6 h-6 rounded-full bg-primary border-4 border-dark z-10"></div>
                <div class="md:w-1/2 md:pl-8 hidden md:block"></div>
              </div>
            </div>
            
            <!-- 西方大陆故事线 -->
            <div class="relative z-10 mb-8">
              <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 md:pr-8 hidden md:block"></div>
                <div class="w-6 h-6 rounded-full bg-secondary border-4 border-dark z-10"></div>
                <div class="md:w-1/2 md:pl-8 mb-4 md:mb-0">
                  <h4 class="text-lg font-semibold text-secondary mb-2">西方大陆故事线：十字军与魔法的裂痕（16-30级）</h4>
                  <p class="text-gray-300">主角穿越到西方大陆，卷入十字军与魔法议会的冲突，揭开教皇与地狱勾结的阴谋。</p>
                </div>
              </div>
            </div>
            
            <!-- 欧亚联合故事线 -->
            <div class="relative z-10 mb-8">
              <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
                  <h4 class="text-lg font-semibold text-info mb-2">欧亚联合故事线：人定胜天的誓约（31-50级）</h4>
                  <p class="text-gray-300">东西方势力联合对抗地狱入侵，主角发现父亲的秘密，最终决战地狱领主玛尔寇。</p>
                </div>
                <div class="w-6 h-6 rounded-full bg-info border-4 border-dark z-10"></div>
                <div class="md:w-1/2 md:pl-8 hidden md:block"></div>
              </div>
            </div>
            
            <!-- 隐藏故事线 -->
            <div class="relative z-10">
              <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 md:pr-8 hidden md:block"></div>
                <div class="w-6 h-6 rounded-full bg-accent border-4 border-dark z-10"></div>
                <div class="md:w-1/2 md:pl-8">
                  <h4 class="text-lg font-semibold text-accent mb-2">隐藏故事线：仙魔大战・人界防线（51-100级）</h4>
                  <p class="text-gray-300">揭示仙魔两界的真正阴谋，主角联合三界力量，最终成为人界守护者，维护三界平衡。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 魔法属性系统 -->
  <section id="magic-system" class="py-16 bg-gradient-to-b from-dark to-dark/90">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-white mb-12">魔法属性系统</h2>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
        <!-- 魔法值计算与作用 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-primary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-magic flex items-center justify-center mr-3">
              <i class="fa fa-bolt text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">魔法值计算与作用</h3>
          </div>
          
          <div class="mb-6">
            <h4 class="text-lg font-semibold text-primary mb-2">基础魔法值</h4>
            <p class="text-gray-300 mb-2">主角基础魔法值 = 等级 × 5（1级5点、5级25点…20级100点）</p>
            <p class="text-gray-300">每级提升时触发【魔法成长检定】1d20：≥12 额外 + 1 点（最多 + 3 点/级，20级最高120点）</p>
          </div>
          
          <div class="mb-6">
            <h4 class="text-lg font-semibold text-primary mb-2">魔法值加成</h4>
            <p class="text-gray-300">每1点魔法值对应"0-1%随机技能伤害加成"，技能释放前进行【魔法增效检定】1d100÷100（结果保留2位小数）</p>
            <div class="bg-dark/50 rounded-lg p-4 mt-2">
              <p class="text-gray-300">例：5点魔法值可提供0-5%伤害浮动（检定结果0.72→每点加成0.72%，总加成3.6%）</p>
            </div>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold text-primary mb-2">核心作用</h4>
            <ul class="list-disc list-inside text-gray-300 space-y-2">
              <li>技能释放消耗：主动技能需消耗指定魔法值</li>
              <li>魔法不足检定：魔法值不足时触发1d20≥18可消耗生命值替代</li>
              <li>魔法抗性关联：魔法值≥50点时，【魔法抗性检定】基础修正+2</li>
            </ul>
          </div>
        </div>
        
        <!-- 魔法值恢复机制 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-secondary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-secondary to-accent flex items-center justify-center mr-3">
              <i class="fa fa-refresh text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">魔法值恢复机制</h3>
          </div>
          
          <div class="space-y-4">
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">自然恢复</h4>
              <p class="text-gray-300">每30秒恢复"等级×1"点（1级1点/30秒、10级10点/30秒）</p>
              <p class="text-gray-400 text-sm">需【魔法恢复检定】1d20：≥12 正常恢复，<12 恢复量减半</p>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">装备特效恢复</h4>
              <p class="text-gray-300">项链/戒指可附加"魔法恢复+1-3点/分钟"（如稀有项链+2点/分钟）</p>
              <p class="text-gray-400 text-sm">触发需【装备特效检定】1d20≥10</p>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">道具恢复</h4>
              <p class="text-gray-300">魔法药水（售价200金币）恢复50点</p>
              <p class="text-gray-400 text-sm">【药水效能检定】1d20：≥15 恢复量+20%（60点），<10 恢复量-10%（45点）</p>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">技能恢复</h4>
              <p class="text-gray-300">主角技能"魔法虹吸""群体回蓝"可主动恢复</p>
              <p class="text-gray-400 text-sm">装备技能"应急回蓝"（护腕附加）可被动触发（生命值<20%时）</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 魔法属性与装备联动 -->
      <div class="mt-12 max-w-6xl mx-auto">
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-info/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-info to-primary flex items-center justify-center mr-3">
              <i class="fa fa-shield text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">魔法属性与装备联动</h3>
          </div>
          
          <div class="overflow-x-auto">
            <table class="w-full text-left">
              <thead>
                <tr class="border-b border-gray-700">
                  <th class="py-3 px-4 text-primary">装备类型</th>
                  <th class="py-3 px-4 text-primary">基础属性</th>
                  <th class="py-3 px-4 text-primary">魔法相关特殊功能</th>
                  <th class="py-3 px-4 text-primary">随机属性范围</th>
                </tr>
              </thead>
              <tbody>
                <tr class="border-b border-gray-800 hover:bg-gray-800/30">
                  <td class="py-3 px-4">项链</td>
                  <td class="py-3 px-4">魔法值（核心）</td>
                  <td class="py-3 px-4">25%概率附加魔法类技能，【魔法增效检定】修正+1-4</td>
                  <td class="py-3 px-4">魔法值+5-25%、技能伤害+3-10%、魔法恢复+1-3点/分钟</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-800/30">
                  <td class="py-3 px-4">武器</td>
                  <td class="py-3 px-4">攻击力</td>
                  <td class="py-3 px-4">30%概率附加攻击/魔法混合技能，【技能适配检定】修正+2-5</td>
                  <td class="py-3 px-4">攻击力+5-20%、暴击率+3-10%、魔法值+3-8%、魔法伤害+2-5%</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-800/30">
                  <td class="py-3 px-4">戒指</td>
                  <td class="py-3 px-4">暴击率</td>
                  <td class="py-3 px-4">20%概率附加魔法辅助技能，【魔法抗性检定】修正+1-3</td>
                  <td class="py-3 px-4">暴击率+5-15%、暴击伤害+10-30%、魔法值+2-6%、魔法恢复+0.5-1点/分钟</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-800/30">
                  <td class="py-3 px-4">头盔</td>
                  <td class="py-3 px-4">护甲</td>
                  <td class="py-3 px-4">10%概率附加魔法防御技能（仅稀有及以上），【魔法守护检定】修正+1-2</td>
                  <td class="py-3 px-4">护甲+5-20%、魔法值+1-4%、魔法抗性+3-8%</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-800/30">
                  <td class="py-3 px-4">盔甲</td>
                  <td class="py-3 px-4">护甲</td>
                  <td class="py-3 px-4">10%概率附加魔法减伤特效（仅史诗及以上），【物理防御检定】修正+1-2</td>
                  <td class="py-3 px-4">护甲+8-25%、生命值+10-30%、魔法值+1-3%、魔法减伤+2-5%</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-800/30">
                  <td class="py-3 px-4">护腕</td>
                  <td class="py-3 px-4">生命值</td>
                  <td class="py-3 px-4">10%概率附加魔法治疗特效（仅稀有及以上），【治疗效果检定】修正+1-2</td>
                  <td class="py-3 px-4">生命值+10-30%、格挡率+3-10%、魔法值+1-3%、生命恢复+1-2点/分钟</td>
                </tr>
                <tr class="hover:bg-gray-800/30">
                  <td class="py-3 px-4">鞋子</td>
                  <td class="py-3 px-4">生命值</td>
                  <td class="py-3 px-4">10%概率附加魔法闪避特效（仅史诗及以上），【闪避触发检定】修正+1-2</td>
                  <td class="py-3 px-4">生命值+10-30%、移动速度+5-15%、魔法值+1-3%、闪避率+2-5%</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 装备品质与魔法值加成 -->
          <div class="mt-8">
            <h4 class="text-lg font-semibold text-info mb-4">各品质装备魔法值加成规则</h4>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
              <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                <h5 class="text-md font-semibold text-gray-300 mb-2">白色（普通）</h5>
                <p class="text-gray-400 text-sm">项链魔法值：+1-3</p>
                <p class="text-gray-400 text-sm">武器/戒指：+0-1</p>
                <p class="text-gray-400 text-sm">技能附加概率：0%</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4 border border-blue-700">
                <h5 class="text-md font-semibold text-blue-300 mb-2">蓝色（精良）</h5>
                <p class="text-gray-400 text-sm">项链魔法值：+3-6</p>
                <p class="text-gray-400 text-sm">武器/戒指：+1-3</p>
                <p class="text-gray-400 text-sm">技能附加概率：10%/5%</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4 border border-yellow-700">
                <h5 class="text-md font-semibold text-yellow-300 mb-2">黄色（稀有）</h5>
                <p class="text-gray-400 text-sm">项链魔法值：+6-12</p>
                <p class="text-gray-400 text-sm">武器/戒指：+3-6</p>
                <p class="text-gray-400 text-sm">技能附加概率：20%/15%</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4 border border-red-700">
                <h5 class="text-md font-semibold text-red-300 mb-2">红色（史诗）</h5>
                <p class="text-gray-400 text-sm">项链魔法值：+10-18</p>
                <p class="text-gray-400 text-sm">武器/戒指：+5-10</p>
                <p class="text-gray-400 text-sm">技能附加概率：30%/25%</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4 border border-green-700">
                <h5 class="text-md font-semibold text-green-300 mb-2">绿色（传说）</h5>
                <p class="text-gray-400 text-sm">项链魔法值：+8-15</p>
                <p class="text-gray-400 text-sm">武器/戒指：+4-8</p>
                <p class="text-gray-400 text-sm">技能附加概率：100%（必带1个）</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 技能系统 -->
  <section id="skill-system" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-white mb-12">技能系统</h2>
      
      <!-- 技能系统选项卡 -->
      <div class="max-w-6xl mx-auto">
        <div class="bg-dark/70 backdrop-blur-md rounded-lg border border-primary/30 overflow-hidden">
          <!-- 选项卡导航 -->
          <div class="flex flex-wrap border-b border-gray-700">
            <button class="skill-tab active px-6 py-3 text-primary font-medium hover:bg-gray-800 transition-colors" data-tab="hero-skills">
              主角技能
            </button>
            <button class="skill-tab px-6 py-3 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="equipment-skills">
              装备附加技能
            </button>
            <button class="skill-tab px-6 py-3 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="monster-skills">
              怪物技能
            </button>
          </div>
          
          <!-- 选项卡内容 -->
          <div class="p-6">
            <!-- 主角技能 -->
            <div id="hero-skills" class="skill-content active">
              <div class="mb-6">
                <h3 class="text-xl font-bold text-white mb-4">主角技能系统（等级解锁 + 随机获取）</h3>
                <p class="text-gray-300 mb-4">
                  每5级解锁1次技能学习机会（5/10/15/20级，共4次），每次从"20个主角技能池"随机抽取1个，抽取前进行【技能稀有度检定】1d20。
                </p>
                
                <div class="bg-dark/50 rounded-lg p-4">
                  <h4 class="text-lg font-semibold text-primary mb-2">技能稀有度检定结果</h4>
                  <ul class="list-disc list-inside text-gray-300 space-y-1">
                    <li>≥18：传说级技能（池内5个）</li>
                    <li>14-17：史诗级技能（池内5个）</li>
                    <li>10-13：稀有级技能（池内5个）</li>
                    <li>&lt;10：普通级技能（池内5个）</li>
                  </ul>
                </div>
              </div>
              
              <!-- 技能列表 -->
              <div class="space-y-6">
                <!-- 普通技能 -->
                <div>
                  <h4 class="text-lg font-semibold text-gray-300 mb-3">普通技能</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="小火球" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">小火球</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：20</p>
                      <p class="text-gray-300">对单个目标造成110%魔法伤害，【技能触发检定】≥10附加1秒灼烧（每秒5点伤害）</p>
                    </div>
                    
                    <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="微光治疗" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">微光治疗</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：25</p>
                      <p class="text-gray-300">恢复自身40%生命值，【治疗效果检定】≥12额外恢复5%魔法值</p>
                    </div>
                    
                    <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="轻甲加持" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">轻甲加持</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：15</p>
                      <p class="text-gray-300">5秒内防御力+10%，【状态持续检定】每2秒掷1d20：≥10效果延长1秒</p>
                    </div>
                    
                    <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="快速闪避" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">快速闪避</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：18</p>
                      <p class="text-gray-300">接下来2次攻击闪避率+20%，【闪避触发检定】≥8生效</p>
                    </div>
                  </div>
                </div>
                
                <!-- 稀有技能 -->
                <div>
                  <h4 class="text-lg font-semibold text-yellow-300 mb-3">稀有技能</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-dark/50 rounded-lg p-4 border border-yellow-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="火焰新星" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">火焰新星</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：35</p>
                      <p class="text-gray-300">对周围3个目标造成120%魔法伤害，【范围检定】≥15额外增加1个目标</p>
                    </div>
                    
                    <div class="bg-dark/50 rounded-lg p-4 border border-yellow-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="强效治愈" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">强效治愈</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：40</p>
                      <p class="text-gray-300">恢复自身60%生命值，【治疗效果检定】≥16清除1个负面状态（如中毒、灼烧）</p>
                    </div>
                  </div>
                </div>
                
                <!-- 史诗技能 -->
                <div>
                  <h4 class="text-lg font-semibold text-red-300 mb-3">史诗技能</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-dark/50 rounded-lg p-4 border border-red-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="地狱火" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">地狱火</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：50</p>
                      <p class="text-gray-300">对周围5个目标造成140%魔法伤害，【火焰强度检定】≥17附加3秒灼烧（每秒10点伤害）</p>
                    </div>
                    
                    <div class="bg-dark/50 rounded-lg p-4 border border-red-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="群体治愈" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">群体治愈</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：55</p>
                      <p class="text-gray-300">恢复自身及队友（若组队）50%生命值，【团队治疗检定】≥15队友恢复量+10%</p>
                    </div>
                  </div>
                </div>
                
                <!-- 传说技能 -->
                <div>
                  <h4 class="text-lg font-semibold text-green-300 mb-3">传说技能</h4>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-dark/50 rounded-lg p-4 border border-green-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="陨石天降" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">陨石天降</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：70</p>
                      <p class="text-gray-300">对周围8个目标造成180%魔法伤害，【陨石强度检定】≥19附加1秒眩晕（目标无法行动）</p>
                    </div>
                    
                    <div class="bg-dark/50 rounded-lg p-4 border border-green-700">
                      <div class="flex items-center mb-2">
                        <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="诸神祝福" class="w-10 h-10 mr-3">
                        <h5 class="text-md font-semibold text-white">诸神祝福</h5>
                      </div>
                      <p class="text-gray-400 text-sm mb-1">魔法消耗：60</p>
                      <p class="text-gray-300">20秒内全属性（攻击力/防御力/魔法值）+30%，【祝福持续检定】每5秒掷1d20：≥15效果延长3秒</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 装备附加技能 -->
            <div id="equipment-skills" class="skill-content hidden">
              <div class="mb-6">
                <h3 class="text-xl font-bold text-white mb-4">装备附加技能系统</h3>
                <p class="text-gray-300 mb-4">
                  武器30%、项链25%、戒指20%、头盔/盔甲/护腕/鞋子10%（仅稀有及以上）概率附加技能，附加时进行【技能品质检定】1d20。
                </p>
                
                <div class="bg-dark/50 rounded-lg p-4">
                  <h4 class="text-lg font-semibold text-secondary mb-2">技能品质检定结果</h4>
                  <ul class="list-disc list-inside text-gray-300 space-y-1">
                    <li>≥16：稀有级及以上技能（池内10个）</li>
                    <li>&lt;16：普通/史诗级技能（池内20个）</li>
                  </ul>
                </div>
              </div>
              
              <!-- 技能类型选项卡 -->
              <div class="mb-6">
                <div class="flex flex-wrap border-b border-gray-700">
                  <button class="equipment-skill-tab active px-4 py-2 text-secondary font-medium hover:bg-gray-800 transition-colors" data-tab="attack-skills">
                    攻击类
                  </button>
                  <button class="equipment-skill-tab px-4 py-2 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="defense-skills">
                    防御类
                  </button>
                  <button class="equipment-skill-tab px-4 py-2 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="heal-skills">
                    治疗类
                  </button>
                  <button class="equipment-skill-tab px-4 py-2 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="buff-skills">
                    增益类
                  </button>
                </div>
              </div>
              
              <!-- 攻击类技能 -->
              <div id="attack-skills" class="equipment-skill-content active">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="毒牙穿刺" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">毒牙穿刺</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：25 | 适配：武器/戒指</p>
                    <p class="text-gray-300">对单个目标造成110%物理伤害+5秒中毒（每秒8点），【中毒检定】≥12中毒时间+2秒</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="冰刃斩" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">冰刃斩</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：30 | 适配：武器/项链</p>
                    <p class="text-gray-300">对单个目标造成125%物理伤害，【冰冻检定】≥14附加1秒冻结</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="雷暴打击" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">雷暴打击</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：33 | 适配：武器/项链</p>
                    <p class="text-gray-300">对单个目标造成130%魔法伤害，【雷击检定】≥15附加"麻痹"（攻击速度-20%，持续2秒）</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="风刃风暴" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">风刃风暴</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：45 | 适配：武器/项链</p>
                    <p class="text-gray-300">对周围4个目标造成115%魔法伤害，【风暴检定】≥16额外增加1个目标</p>
                  </div>
                </div>
              </div>
              
              <!-- 防御类技能 -->
              <div id="defense-skills" class="equipment-skill-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="石肤术" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">石肤术</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：22 | 适配：盔甲/项链</p>
                    <p class="text-gray-300">8秒内防御力+20%，【石肤强度检定】≥11吸收伤害+10点</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="魔法反弹" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">魔法反弹</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：35 | 适配：戒指/头盔</p>
                    <p class="text-gray-300">接下来2次魔法攻击反弹15%伤害，【反弹检定】≥15反弹率+5%（20%）</p>
                  </div>
                </div>
              </div>
              
              <!-- 治疗类技能 -->
              <div id="heal-skills" class="equipment-skill-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="生命虹吸" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">生命虹吸</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：38 | 适配：戒指/项链</p>
                    <p class="text-gray-300">攻击时恢复5%生命值，【虹吸检定】≥14恢复量+2%（7%）</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="应急治愈" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">应急治愈</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：25 | 适配：护腕/项链</p>
                    <p class="text-gray-300">生命值低于30%时自动触发，恢复20%生命值，【应急检定】≥12恢复量+5%（25%）</p>
                  </div>
                </div>
              </div>
              
              <!-- 增益类技能 -->
              <div id="buff-skills" class="equipment-skill-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="急速" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">急速</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：20 | 适配：鞋子/戒指</p>
                    <p class="text-gray-300">10秒内攻击速度+25%，【急速检定】≥13速度加成+5%（30%）</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="魔法增效" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">魔法增效</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">魔法消耗：30 | 适配：项链/头盔</p>
                    <p class="text-gray-300">12秒内魔法技能伤害+20%，【增效检定】≥15伤害加成+5%（25%）</p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 怪物技能 -->
            <div id="monster-skills" class="skill-content hidden">
              <div class="mb-6">
                <h3 class="text-xl font-bold text-white mb-4">怪物技能系统</h3>
                <p class="text-gray-300 mb-4">
                  精英怪物每击败5只普通怪物刷新1只（1-2个技能），BOSS怪物每层必带2-3个技能（5层BOSS带4个）。
                </p>
                
                <div class="bg-dark/50 rounded-lg p-4">
                  <h4 class="text-lg font-semibold text-info mb-2">怪物技能触发机制</h4>
                  <ul class="list-disc list-inside text-gray-300 space-y-1">
                    <li>精英怪物：技能触发概率 =（怪物等级 - 玩家等级）×2%+30%（最低20%）</li>
                    <li>BOSS怪物：技能释放遵循固定循环，每次释放前进行【BOSS技能强度检定】1d20</li>
                    <li>玩家抵抗：面对怪物技能时，自动触发对应检定（魔法→魔法抗性，物理→物理防御）</li>
                  </ul>
                </div>
              </div>
              
              <!-- 怪物层级选项卡 -->
              <div class="mb-6">
                <div class="flex flex-wrap border-b border-gray-700">
                  <button class="monster-skill-tab active px-4 py-2 text-info font-medium hover:bg-gray-800 transition-colors" data-tab="basic-monster-skills">
                    基础怪物（1-5级）
                  </button>
                  <button class="monster-skill-tab px-4 py-2 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="intermediate-monster-skills">
                    中级怪物（6-10级）
                  </button>
                  <button class="monster-skill-tab px-4 py-2 text-gray-400 font-medium hover:bg-gray-800 transition-colors" data-tab="advanced-monster-skills">
                    高级怪物（11-15级）
                  </button>
                </div>
              </div>
              
              <!-- 基础怪物技能 -->
              <div id="basic-monster-skills" class="monster-skill-content active">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="野蛮挥击" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">野蛮挥击</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">类型：物理 | 适配：哥布林精英、骷髅精英</p>
                    <p class="text-gray-300">对单个玩家造成130%物理伤害，玩家【物理防御检定】≥12减免20%</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="毒雾喷射" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">毒雾喷射</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">类型：魔法 | 适配：幽灵精英、低级恶魔法师</p>
                    <p class="text-gray-300">对玩家造成持续5秒中毒（每秒7点），玩家【魔法抗性检定】≥11中毒时间缩短2秒</p>
                  </div>
                </div>
              </div>
              
              <!-- 中级怪物技能 -->
              <div id="intermediate-monster-skills" class="monster-skill-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="火焰冲击" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">火焰冲击</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">类型：魔法 | 适配：地狱犬精英、巫妖精英</p>
                    <p class="text-gray-300">对玩家及周围1个目标造成150%魔法伤害，玩家【范围抵抗检定】≥14仅承受80%伤害</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="生命窃取" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">生命窃取</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">类型：特殊 | 适配：吸血鬼精英、暗影刺客</p>
                    <p class="text-gray-300">怪物攻击时恢复10%生命值，玩家【反制检定】≥15降低5%窃取量（5%）</p>
                  </div>
                </div>
              </div>
              
              <!-- 高级怪物技能 -->
              <div id="advanced-monster-skills" class="monster-skill-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="陨石坠落" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">陨石坠落</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">类型：魔法 | 适配：5层BOSS、恶魔精英</p>
                    <p class="text-gray-300">对玩家周围4个格子造成180%魔法伤害，玩家【闪避检定】≥18可完全躲避</p>
                  </div>
                  
                  <div class="bg-dark/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex items-center mb-2">
                      <img src="https://p11-doubao-search-sign.byteimg.com/labis/501b9c545c887b34834d3827d11c95ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825116&x-signature=8NH4E7MpqQu1Ij4nuw5xMbj2yfw%3D" alt="绝对防御" class="w-10 h-10 mr-3">
                      <h5 class="text-md font-semibold text-white">绝对防御</h5>
                    </div>
                    <p class="text-gray-400 text-sm mb-1">类型：防御 | 适配：4-5层BOSS</p>
                    <p class="text-gray-300">怪物10秒内免疫30%伤害，玩家【穿透检定】≥20可无视10%免疫效果（20%）</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 地下迷宫系统 -->
  <section id="dungeon-system" class="py-16 bg-gradient-to-b from-dark to-dark/90">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-white mb-12">地下迷宫系统</h2>
      
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <!-- 迷宫基础规则 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-primary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-magic flex items-center justify-center mr-3">
              <i class="fa fa-map text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">迷宫基础规则</h3>
          </div>
          
          <div class="mb-6">
            <h4 class="text-lg font-semibold text-primary mb-2">迷宫进入与难度检定</h4>
            <p class="text-gray-300 mb-2">玩家触发迷宫入口剧情后，进行【迷宫适配性检定】1d20 + 体质：</p>
            <ul class="list-disc list-inside text-gray-300 space-y-1">
              <li>≥18（完美适配）：怪物等级 = 玩家等级 ×0.9，魔法药水消耗 - 20%</li>
              <li>12-17（常规适配）：怪物等级 = 玩家等级 ×1.0，无修正/惩罚</li>
              <li>&lt;12（勉强适配）：怪物等级 = 玩家等级 ×1.1，每30分钟额外消耗1瓶魔法药水</li>
            </ul>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold text-primary mb-2">迷宫层级特性</h4>
            <div class="space-y-3">
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">1层（废弃矿井）</p>
                <p class="text-gray-400 text-sm">每小时【矿洞稳定性检定】1d20：≥15 无干扰，&lt;15 挂机暂停5分钟</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">2层（古老墓穴）</p>
                <p class="text-gray-400 text-sm">每击败3只怪物【陷阱规避检定】1d20 + 敏捷：≥12 免伤，&lt;12 损失5%生命值</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">3层（元素密室）</p>
                <p class="text-gray-400 text-sm">每10分钟【元素抗性检定】1d6：1-2 对应元素抗-10%，3-4 无影响，5-6 对应元素抗+10%</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">4层（暗影大厅）</p>
                <p class="text-gray-400 text-sm">【目标锁定效率】=1d20 + 感知 ÷3：≥10 正常锁定，&lt;10 目标切换延迟2秒</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">5层（深渊祭坛）</p>
                <p class="text-gray-400 text-sm">击败50只怪物后【BOSS威慑检定】1d20 + 勇气：≥16 解锁BOSS弱点，&lt;16 BOSS初始生命值+10%</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 全自动挂机战斗机制 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-secondary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-secondary to-accent flex items-center justify-center mr-3">
              <i class="fa fa-refresh text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">全自动挂机战斗机制</h3>
          </div>
          
          <div class="space-y-4">
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">怪物检测阶段</h4>
              <p class="text-gray-300">每10秒扫描区域怪物，进行【威胁感知检定】1d20 + 感知（含装备修正）</p>
              <ul class="list-disc list-inside text-gray-400 text-sm mt-1">
                <li>≥15：锁定ki per sec（经验/时间比）最高目标</li>
                <li>10-14：按默认顺序锁定（近→远）</li>
                <li>&lt;10：锁定距离最近目标，收益降低15%</li>
              </ul>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">技能释放阶段</h4>
              <p class="text-gray-300">系统按"高优先级技能→低优先级技能"自动释放，释放前检查：</p>
              <ul class="list-disc list-inside text-gray-400 text-sm mt-1">
                <li>魔法值≥消耗80%</li>
                <li>技能冷却结束</li>
                <li>【技能触发检定】≥阈值</li>
              </ul>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">自动补给阶段</h4>
              <p class="text-gray-300">实时监控生命值/魔法值：</p>
              <ul class="list-disc list-inside text-gray-400 text-sm mt-1">
                <li>生命值&lt;30%：触发【补给效率检定】</li>
                <li>魔法值&lt;20%：触发【魔法补给检定】</li>
              </ul>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-secondary mb-2">目标切换阶段</h4>
              <p class="text-gray-300">当前目标死亡后，重新进行【威胁感知检定】，同时检查是否触发随机事件</p>
            </div>
          </div>
        </div>
        
        <!-- 迷宫地图 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-info/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-info to-primary flex items-center justify-center mr-3">
              <i class="fa fa-map-o text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">迷宫地图</h3>
          </div>
          
          <div class="space-y-4">
            <div class="relative">
              <img src="https://p3-doubao-search-sign.byteimg.com/labis/b0e761bc474c61601bab72116d0891f4~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825117&x-signature=WFZOhRoW50n9EMBuT2m%2FHXlwD%2Fc%3D" alt="地下迷宫1层" class="w-full h-auto rounded-lg">
              <div class="absolute bottom-2 right-2 bg-dark/70 px-2 py-1 rounded text-xs text-white">
                1层（废弃矿井）
              </div>
            </div>
            
            <div class="relative">
              <img src="https://p3-doubao-search-sign.byteimg.com/labis/10ce7185cefe02264a0de59cd366c8f6~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825117&x-signature=zbzJ%2BIijtmwggRq0v6fpNtP3m34%3D" alt="地下迷宫2层" class="w-full h-auto rounded-lg">
              <div class="absolute bottom-2 right-2 bg-dark/70 px-2 py-1 rounded text-xs text-white">
                2层（古老墓穴）
              </div>
            </div>
            
            <div class="relative">
              <img src="https://p3-doubao-search-sign.byteimg.com/labis/e51e86f6cc3e9eada9d62a9b69dc14c0~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776825117&x-signature=fxFygPlAG47L8Pu2sfwDifiTZZ0%3D" alt="地下迷宫3层" class="w-full h-auto rounded-lg">
              <div class="absolute bottom-2 right-2 bg-dark/70 px-2 py-1 rounded text-xs text-white">
                3层（元素密室）
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 挂机可视化面板 -->
      <div class="mt-12 max-w-6xl mx-auto">
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-warning/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-warning to-danger flex items-center justify-center mr-3">
              <i class="fa fa-tachometer text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">挂机可视化面板</h3>
          </div>
          
          <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
            <div class="flex justify-between items-center mb-4">
              <h4 class="text-lg font-semibold text-warning">【地下迷宫3层（元素密室）- 挂机中】</h4>
              <span class="bg-warning/20 text-warning px-3 py-1 rounded-full text-sm">进行中</span>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div class="mb-4">
                  <p class="text-gray-400 mb-1">进度</p>
                  <p class="text-white">击败12/50只（距BOSS检定剩38只），已挂机25分钟，预计剩余1小时35分钟</p>
                </div>
                
                <div class="mb-4">
                  <p class="text-gray-400 mb-1">角色状态</p>
                  <p class="text-white">生命值92%（184/200），魔法值85/120（项链+25、戒指+10），【魔法增效检定】当前0.7%/点</p>
                </div>
                
                <div class="mb-4">
                  <p class="text-gray-400 mb-1">技能状态</p>
                  <p class="text-white">主角"火焰新星"（冷却12秒）、装备"魔法屏障"（项链附加，触发阈值12），下一个技能"闪电链"（冷却8秒）</p>
                </div>
              </div>
              
              <div>
                <div class="mb-4">
                  <p class="text-gray-400 mb-1">怪物预警</p>
                  <p class="text-white">3分钟后刷新精英幽灵（携带"毒雾喷射"，魔法伤害为主），建议触发"魔法抗性"技能</p>
                </div>
                
                <div class="mb-4">
                  <p class="text-gray-400 mb-1">收益统计</p>
                  <p class="text-white">已获经验1850（每小时预计4440）、金币320（每小时768）、声望15（精英怪+5/只）</p>
                </div>
                
                <div class="mb-4">
                  <p class="text-gray-400 mb-1">资源消耗</p>
                  <p class="text-white">生命药水剩余8瓶（每小时消耗2瓶）、魔法药水剩余5瓶（每小时消耗1.5瓶）</p>
                </div>
              </div>
            </div>
            
            <!-- 进度条 -->
            <div class="mt-6">
              <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-400">总体进度</span>
                <span class="text-sm text-white">24%</span>
              </div>
              <div class="w-full bg-gray-700 rounded-full h-2.5">
                <div class="bg-warning h-2.5 rounded-full" style="width: 24%"></div>
              </div>
            </div>
          </div>
          
          <!-- 挂机日志 -->
          <div class="mt-6">
            <h4 class="text-lg font-semibold text-warning mb-3">挂机日志</h4>
            
            <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700 max-h-48 overflow-y-auto scrollbar-hide">
              <div class="space-y-2">
                <p class="text-gray-300"><span class="text-gray-500">14:00</span> 进入3层，【元素适配检定】15→常规适配，装备"蓝宝石项链"魔法值+25，【元素抗性检定】基础+2</p>
                <p class="text-gray-300"><span class="text-gray-500">14:05</span> 遭遇精英幽灵，【怪物技能检定】13→释放"毒雾喷射"，玩家【魔法抗性检定】14→减免15%，损失18生命值（当前82%）</p>
                <p class="text-gray-300"><span class="text-gray-500">14:08</span> 魔法值≥35，自动触发"火焰新星"，【技能触发检定】16→范围+1（命中4目标），伤害126.72%，获经验210、金币35</p>
                <p class="text-gray-300"><span class="text-gray-500">14:10</span> 装备"史诗戒指""生命虹吸"触发，【虹吸检定】12→攻击恢复5%生命值（+9，当前91%）</p>
                <p class="text-gray-300"><span class="text-gray-500">14:12</span> 魔法值降至28（&lt;35），【魔法补给检定】11→使用魔法药水，【药水效能检定】13→恢复50点（当前78/120）</p>
                <p class="text-gray-300"><span class="text-gray-500">14:15</span> 击败第15只怪物，【战利品品质检定】17→获得"稀有魔法水晶"（合成材料，售价80金币），【幸运检定】12→额外获声望5</p>
                <p class="text-gray-300"><span class="text-gray-500">14:18</span> 触发随机事件"隐藏宝箱"，【感知检定】16→发现宝箱，开启获"精良项链"（魔法值+4）</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 装备与货币经济系统 -->
  <section id="equipment-system" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-white mb-12">装备与货币经济系统</h2>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
        <!-- 装备系统 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-primary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-magic flex items-center justify-center mr-3">
              <i class="fa fa-shield text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">装备系统</h3>
          </div>
          
          <div class="mb-6">
            <h4 class="text-lg font-semibold text-primary mb-2">装备定价公式</h4>
            <p class="text-gray-300 mb-2">基础装备价格 = 等级 × 100（1级100金币、10级1000金币、20级2000金币）</p>
            <p class="text-gray-300 mb-2">魔法装备价格 = 基础价格 × (1 + 魔法值 × 0.5% + 技能附加价值%)</p>
            
            <div class="bg-dark/50 rounded-lg p-4 mt-2">
              <p class="text-gray-300">例：10级精良项链（基础价格1000金币，魔法值+4，附加"魔法护盾"技能）</p>
              <p class="text-gray-300">价格 = 1000×(1 + 4×0.5% + 8%) = 1000×1.1 = 1100金币</p>
            </div>
          </div>
          
          <div class="mb-6">
            <h4 class="text-lg font-semibold text-primary mb-2">装备出售价格</h4>
            <p class="text-gray-300 mb-2">装备出售价格 = 购买价格 × (30% + 【装备估值检定】结果 × 1%)（最高50%）</p>
            
            <div class="bg-dark/50 rounded-lg p-4 mt-2">
              <p class="text-gray-300">例：【估值检定】15→出售价格 = 1100×(30%+15%) = 495金币</p>
            </div>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold text-primary mb-2">装备强化/合成/分解</h4>
            
            <div class="space-y-4">
              <div class="bg-dark/50 rounded-lg p-4">
                <h5 class="text-md font-semibold text-white mb-1">强化</h5>
                <p class="text-gray-300">消耗金币（等级×100/次）+ 强化石 + 魔法水晶（魔法装备专属）</p>
                <p class="text-gray-400 text-sm mt-1">【强化成功率检定】1d20：≥18成功+10%属性，12-17成功+5%属性，&lt;12失败</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4">
                <h5 class="text-md font-semibold text-white mb-1">合成</h5>
                <p class="text-gray-300">3个同等级同类型装备→1个高1级装备</p>
                <p class="text-gray-400 text-sm mt-1">【合成品质检定】1d20：≥18品质+1档，12-17正常品质，&lt;12失败</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4">
                <h5 class="text-md font-semibold text-white mb-1">分解</h5>
                <p class="text-gray-300">装备分解为材料（白色1份、蓝色2份、黄色3份、史诗4份、传说5份）</p>
                <p class="text-gray-400 text-sm mt-1">魔法装备额外获得"魔法碎片"（1-3个），【分解效率检定】≥15多获1份材料</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 货币系统 -->
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-secondary/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-secondary to-accent flex items-center justify-center mr-3">
              <i class="fa fa-money text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">货币系统</h3>
          </div>
          
          <div class="mb-6">
            <h4 class="text-lg font-semibold text-secondary mb-2">货币类型与获取</h4>
            
            <div class="space-y-4">
              <div class="bg-dark/50 rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <i class="fa fa-coins text-yellow-400 mr-2"></i>
                  <h5 class="text-md font-semibold text-white">金币</h5>
                </div>
                <p class="text-gray-300 mb-1">核心用途：基础消耗品、低级装备、强化材料</p>
                <p class="text-gray-400 text-sm">获取途径：战斗掉落、任务奖励、出售装备</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <i class="fa fa-gem text-blue-400 mr-2"></i>
                  <h5 class="text-md font-semibold text-white">钻石</h5>
                </div>
                <p class="text-gray-300 mb-1">核心用途：稀有道具、技能重选、高级装备</p>
                <p class="text-gray-400 text-sm">获取途径：充值、特殊任务、成就奖励</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <i class="fa fa-star text-yellow-300 mr-2"></i>
                  <h5 class="text-md font-semibold text-white">声望</h5>
                </div>
                <p class="text-gray-300 mb-1">核心用途：特殊商店、限定装备（魔法类）</p>
                <p class="text-gray-400 text-sm">获取途径：声望任务、公会活动、击败精英/BOSS</p>
              </div>
            </div>
          </div>
          
          <div>
            <h4 class="text-lg font-semibold text-secondary mb-2">NPC商店功能</h4>
            
            <div class="space-y-3">
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">装备商</p>
                <p class="text-gray-400 text-sm">出售1-20级装备，魔法装备需声望解锁，【购买优惠检定】≥18享9折</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">杂货商</p>
                <p class="text-gray-400 text-sm">出售魔法药水（200金币）、魔法水晶（150金币），每日限购5瓶/个</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">铁匠</p>
                <p class="text-gray-400 text-sm">魔法装备强化需"魔法碎片"，【强化特效检定】≥18可附加"魔法伤害+2%"</p>
              </div>
              
              <div class="bg-dark/50 rounded-lg p-3">
                <p class="text-white font-medium">任务NPC</p>
                <p class="text-gray-400 text-sm">发布"魔法收集任务"，完成【任务评价检定】≥18额外得"魔法技能卷轴"</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 经济平衡策略 -->
      <div class="mt-12 max-w-6xl mx-auto">
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-info/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-info to-primary flex items-center justify-center mr-3">
              <i class="fa fa-balance-scale text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">经济平衡策略</h3>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-info mb-2">货币供应控制</h4>
              <p class="text-gray-300">当服务器金币总量过高时，【怪物掉落检定】≤10概率+20%（降低金币掉落）；反之则提升</p>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-info mb-2">魔法道具消耗引导</h4>
              <p class="text-gray-300">挂机时魔法药水消耗=技能释放次数×0.3（【技能使用频率检定】影响次数），确保每日消耗3-5瓶</p>
            </div>
            
            <div class="bg-dark/50 rounded-lg p-4">
              <h4 class="text-md font-semibold text-info mb-2">限时活动调节</h4>
              <p class="text-gray-300">节日活动推出"魔法装备折扣"（【活动折扣检定】≥15享7折），消耗冗余货币</p>
            </div>
          </div>
          
          <!-- 装备品质与价格关系图 -->
          <div class="mt-8">
            <h4 class="text-lg font-semibold text-info mb-4">装备品质与价格关系</h4>
            <div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700 h-64">
              <canvas id="equipmentPriceChart"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- DDM检定模拟器 -->
  <section id="ddm-simulator" class="py-16 bg-gradient-to-b from-dark to-dark/90">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-white mb-12">DDM检定模拟器</h2>
      
      <div class="max-w-4xl mx-auto">
        <div class="bg-dark/70 backdrop-blur-md rounded-lg p-6 border border-warning/30 hover:border-glow transition-all duration-300">
          <div class="flex items-center mb-6">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-warning to-danger flex items-center justify-center mr-3">
              <i class="fa fa-dice text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-white">骰子检定模拟器</h3>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 检定设置 -->
            <div>
              <div class="mb-6">
                <label class="block text-gray-300 mb-2">检定类型</label>
                <select id="check-type" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-warning">
                  <option value="d20">d20检定（标准）</option>
                  <option value="d100">d100检定（百分比）</option>
                  <option value="magic-growth">魔法成长检定</option>
                  <option value="magic-resistance">魔法抗性检定</option>
                  <option value="skill-trigger">技能触发检定</option>
                  <option value="boss-skill">BOSS技能强度检定</option>
                </select>
              </div>
              
              <div class="mb-6">
                <label class="block text-gray-300 mb-2">修正值</label>
                <input type="number" id="modifier" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-warning" value="0">
                <p class="text-gray-400 text-sm mt-1">可正可负，例如：魔法值≥50点时，魔法抗性检定+2</p>
              </div>
              
              <div class="mb-6">
                <label class="block text-gray-300 mb-2">目标难度</label>
                <input type="number" id="difficulty" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-warning" value="10">
                <p class="text-gray-400 text-sm mt-1">检定需要达到或超过的值才算成功</p>
              </div>
              
              <button id="roll-button" class="w-full bg-gradient-to-r from-warning to-danger text-white py-3 px-6 rounded-lg font-medium hover:bg-opacity-90 transition-all duration-300 flex items-center justify-center">
                <i class="fa fa-refresh mr-2"></i> 掷骰子
              </button>
            </div>
            
            <!-- 检定结果 -->
            <div class="bg-gray-900/50 rounded-lg p-6 border border-gray-700">
              <h4 class="text-lg font-semibold text-warning mb-4">检定结果</h4>
              
              <div class="flex justify-center mb-6">
                <div id="dice-result" class="w-32 h-32 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center text-4xl font-bold text-white border-4 border-warning animate-pulse-slow">
                  ?
                </div>
              </div>
              
              <div class="space-y-4">
                <div>
                  <p class="text-gray-400 mb-1">骰子点数</p>
                  <p id="roll-value" class="text-white text-xl">?</p>
                </div>
                
                <div>
                  <p class="text-gray-400 mb-1">修正后结果</p>
                  <p id="modified-value" class="text-white text-xl">?</p>
                </div>
                
                <div>
                  <p class="text-gray-400 mb-1">检定结果</p>
                  <p id="check-result" class="text-white text-xl">?</p>
                </div>
                
                <div>
                  <p class="text-gray-400 mb-1">结果解释</p>
                  <p id="result-explanation" class="text-gray-300">请点击掷骰子按钮进行检定</p>
                </div>
              </div>
              
              <!-- 检定历史 -->
              <div class="mt-6">
                <h5 class="text-md font-semibold text-gray-300 mb-2">检定历史</h5>
                <div id="roll-history" class="max-h-32 overflow-y-auto scrollbar-hide space-y-1">
                  <!-- 历史记录将在这里添加 -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-dark border-t border-gray-800 py-8">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <div class="flex items-center space-x-2">
            <div class="w-8 h-8 rounded-full bg-gradient-magic flex items-center justify-center">
              <i class="fa fa-book text-white"></i>
            </div>
            <h2 class="text-lg font-bold text-white">《流浪日记》DDM风格游戏系统</h2>
          </div>
          <p class="text-gray-400 mt-2">融合文字冒险沉浸感与DDM策略检定的全新游戏体验</p>
        </div>
        
        <div class="flex space-x-4">
          <a href="#core-setting" class="text-gray-400 hover:text-white transition-colors">
            <i class="fa fa-arrow-up mr-1"></i> 返回顶部
          </a>
        </div>
      </div>
      
      <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
        <p>© 2025 《流浪日记》游戏开发团队. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
// 移动端菜单切换
	document.getElementById('mobile-menu-button').addEventListener('click', function() {
	  const mobileMenu = document.getElementById('mobile-menu');
	  mobileMenu.classList.toggle('hidden');
	});

	// 技能选项卡切换
	document.querySelectorAll('.skill-tab').forEach(tab => {
	  tab.addEventListener('click', function() {
		// 移除所有选项卡的active类
		document.querySelectorAll('.skill-tab').forEach(t => {
		  t.classList.remove('active', 'text-primary');
		  t.classList.add('text-gray-400');
		});
		
		// 给当前点击的选项卡添加active类
		this.classList.add('active', 'text-primary');
		this.classList.remove('text-gray-400');
		
		// 隐藏所有内容
		document.querySelectorAll('.skill-content').forEach(content => {
		  content.classList.remove('active');
		  content.classList.add('hidden');
		});
		
		// 显示对应内容
		const tabId = this.getAttribute('data-tab');
		document.getElementById(tabId).classList.add('active');
		document.getElementById(tabId).classList.remove('hidden');
	  });
	});
    
    // 装备技能类型选项卡切换
    document.querySelectorAll('.equipment-skill-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有选项卡的活动状态
        document.querySelectorAll('.equipment-skill-tab').forEach(t => {
          t.classList.remove('active', 'text-secondary');
          t.classList.add('text-gray-400');
        });
        
        // 隐藏所有内容
        document.querySelectorAll('.equipment-skill-content').forEach(content => {
          content.classList.add('hidden');
          content.classList.remove('active');
        });
        
        // 激活当前选项卡
        this.classList.add('active', 'text-secondary');
        this.classList.remove('text-gray-400');
        
        // 显示对应内容
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.remove('hidden');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 怪物技能层级选项卡切换
    document.querySelectorAll('.monster-skill-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有选项卡的活动状态
        document.querySelectorAll('.monster-skill-tab').forEach(t => {
          t.classList.remove('active', 'text-info');
          t.classList.add('text-gray-400');
        });
        
        // 隐藏所有内容
        document.querySelectorAll('.monster-skill-content').forEach(content => {
          content.classList.add('hidden');
          content.classList.remove('active');
        });
        
        // 激活当前选项卡
        this.classList.add('active', 'text-info');
        this.classList.remove('text-gray-400');
        
        // 显示对应内容
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.remove('hidden');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 装备品质与价格关系图表
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('equipmentPriceChart').getContext('2d');
      
      const chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['白色', '蓝色', '黄色', '红色', '绿色'],
          datasets: [{
            label: '基础价格（金币）',
            data: [100, 300, 600, 1000, 1500],
            backgroundColor: '#9CA3AF',
            borderColor: '#9CA3AF',
            borderWidth: 1
          }, {
            label: '魔法装备平均价格（金币）',
            data: [150, 450, 900, 1600, 2400],
            backgroundColor: '#3B82F6',
            borderColor: '#3B82F6',
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            },
            x: {
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          },
          plugins: {
            legend: {
              labels: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          }
        }
      });
    });
    
    // DDM检定模拟器
    document.getElementById('roll-button').addEventListener('click', function() {
      const checkType = document.getElementById('check-type').value;
      const modifier = parseInt(document.getElementById('modifier').value) || 0;
      const difficulty = parseInt(document.getElementById('difficulty').value) || 10;
      
      let roll, maxRoll, result, explanation;
      
      // 根据检定类型确定骰子类型和结果解释
      switch(checkType) {
        case 'd20':
          maxRoll = 20;
          roll = Math.floor(Math.random() * maxRoll) + 1;
          result = roll + modifier;
          
          if (result >= difficulty) {
            explanation = `检定成功！${result} ≥ ${difficulty}`;
          } else {
            explanation = `检定失败！${result} < ${difficulty}`;
          }
          break;
          
        case 'd100':
          maxRoll = 100;
          roll = Math.floor(Math.random() * maxRoll) + 1;
          result = roll + modifier;
          
          if (result >= difficulty) {
            explanation = `检定成功！${result} ≥ ${difficulty}`;
          } else {
            explanation = `检定失败！${result} < ${difficulty}`;
          }
          break;
          
        case 'magic-growth':
          maxRoll = 20;
          roll = Math.floor(Math.random() * maxRoll) + 1;
          result = roll + modifier;
          
          if (result >= 18) {
            explanation = `魔法成长检定成功！获得额外3点魔法值。`;
          } else if (result >= 15) {
            explanation = `魔法成长检定成功！获得额外2点魔法值。`;
          } else if (result >= 12) {
            explanation = `魔法成长检定成功！获得额外1点魔法值。`;
          } else {
            explanation = `魔法成长检定失败！未获得额外魔法值。`;
          }
          break;
          
        case 'magic-resistance':
          maxRoll = 20;
          roll = Math.floor(Math.random() * maxRoll) + 1;
          result = roll + modifier;
          
          if (result >= 15) {
            explanation = `魔法抗性检定成功！伤害减免30%。`;
          } else if (result >= 10) {
            explanation = `魔法抗性检定成功！伤害减免15%。`;
          } else {
            explanation = `魔法抗性检定失败！无伤害减免。`;
          }
          break;
          
        case 'skill-trigger':
          maxRoll = 20;
          roll = Math.floor(Math.random() * maxRoll) + 1;
          result = roll + modifier;
          
          if (result >= difficulty) {
            explanation = `技能触发检定成功！技能效果完全生效。`;
          } else {
            explanation = `技能触发检定失败！技能效果减弱或无法触发。`;
          }
          break;
          
        case 'boss-skill':
          maxRoll = 20;
          roll = Math.floor(Math.random() * maxRoll) + 1;
          result = roll + modifier;
          
          if (result >= 16) {
            explanation = `BOSS技能强度检定！技能效果+20%。`;
          } else if (result >= 10) {
            explanation = `BOSS技能强度检定！技能效果正常。`;
          } else {
            explanation = `BOSS技能强度检定！技能效果-10%。`;
          }
          break;
      }
      
      // 更新UI
      document.getElementById('dice-result').textContent = roll;
      document.getElementById('roll-value').textContent = roll;
      document.getElementById('modified-value').textContent = result;
      
      const resultElement = document.getElementById('check-result');
      resultElement.textContent = result >= difficulty ? '成功' : '失败';
      resultElement.className = result >= difficulty ? 'text-success text-xl' : 'text-danger text-xl';
      
      document.getElementById('result-explanation').textContent = explanation;
      
      // 添加到历史记录
      const historyElement = document.getElementById('roll-history');
      const historyItem = document.createElement('div');
      historyItem.className = 'text-gray-400 text-sm';
      historyItem.textContent = `${new Date().toLocaleTimeString()}: ${checkType} - 骰子: ${roll}, 修正: ${modifier}, 结果: ${result} (${result >= difficulty ? '成功' : '失败'})`;
      historyElement.prepend(historyItem);
      
      // 限制历史记录数量
      if (historyElement.children.length > 5) {
        historyElement.removeChild(historyElement.lastChild);
      }
      
      // 添加动画效果
      const diceElement = document.getElementById('dice-result');
      diceElement.classList.add('scale-110');
      setTimeout(() => {
        diceElement.classList.remove('scale-110');
      }, 200);
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 如果是移动端，点击后关闭菜单
          const mobileMenu = document.getElementById('mobile-menu');
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
  </script>
</body>
</html>
